<template>
  <div class="main">
    <section>
      <div class="btn-block">
        <router-link v-if="rightsButtons['add']" :to="{name: 'appConfigAdd'}" class="filter-item">
          <el-button type="success" size="small" icon="el-icon-circle-plus" plain>新建App配置</el-button>
        </router-link>
        <template v-if="lastPushData">
          <div class="push-item" v-if="lastPushData.publishTime">最后发布时间：<span>{{lastPushData.publishTime}}</span></div>
          <div class="push-item" v-if="lastPushData.version">最后发布版本：<span>{{lastPushData.version}}</span></div>
        </template>
      </div>
      <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="fetchData"/>
      <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
        <el-table-column align="center" label="序号" type="index" fixed :index="(index)=>{return indexMethod(index, listQuery)}" width="80">
        </el-table-column>
        <el-table-column align="center" label="配置标题" prop="title" min-width="160">
        </el-table-column>
        <el-table-column align="center" label="配置类型" prop="propertiesTypeName" width="130">
        </el-table-column>
        <el-table-column align="center" label="版本" prop="version" min-width="160">
        </el-table-column>
        <el-table-column align="center" label="消息推送" prop="messagePushStatus" width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.messagePushStatus>=0">{{['不推送', '推送所有'][scope.row.messagePushStatus]}}</span>
            <span v-else> - </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="createdAt" width="160">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="更新时间" prop="updatedAt" width="160">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.updatedAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="acm发布时间" prop="acmPublishTime" width="160">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.acmPublishTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="182">
          <template slot-scope="scope">
            <router-link v-if="rightsButtons['edit']" :to="{name: 'appConfigEdit', params: {id: scope.row.propertiesId}}">
              <el-button type="primary" size="mini" plain>编辑</el-button>
            </router-link>
            <router-link v-if="rightsButtons['history']" :to="{name: 'appConfigHistory', params: {propertiesType: scope.row.propertiesType}}">
              <el-button type="warning" size="mini" plain>历史纪录</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>
<script>
import searchForm from '../../components/searchForm/index'
export default {
  name: 'appConfig',
  components: {
    searchForm
  },
  data(){
    return{
      listQuery: { propertiesType: '' },
      queryConfig: [
        { type: 'select', label: '配置类型', prop: 'propertiesType', data: [] }
      ],
      listLoading: true,
      // listTotal: 0,
      list: [],

      lastPushData: {}
    }
  },
  created(){
    this.fetchData()
    this.fetchTypeData()
    this.fetchPushData()
  },
  methods: {
    fetchData(){
      this.listLoading = true
      this.request({
        url: '/acm/client-properties/list',
        method: 'get',
        params: this.listQuery
      }).then(({data, totalCount}) => {
        this.list = data;
        // this.listTotal = totalCount;
        this.listLoading = false;
      }).catch(err => {
        console.log(err);
        this.list = [];
        // this.listTotal = 0;
        this.listLoading = false;
      });
    },
    fetchTypeData(){
      this.request({
        url: '/acm/client-properties-type/list',
        method: 'get'
      }).then(({data}) => {
        this.queryConfig[0].data = data.map(i => {
          return {
            label: i.typeName,
            value: i.typeKey
          }
        });
        this.queryConfig[0].data = [{ label: '全部', value:'' }].concat(this.queryConfig[0].data)
      }).catch(err => {
        console.log(err);
      });
    },
    fetchPushData(){
      this.request({
        url: '/acm/acm-publish-record/last',
        method: 'get'
      }).then(({data}) => {
        this.lastPushData = data
      }).catch(err => {
        console.log(err);
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-block{
  .push-item{
    color: #999;
    font-size: 14px;
    display: inline-block;
    margin-left: 50px;

    span{
      color: #333;
      font-size: 15px;
    }
  }
}
</style>